import getComponentRootDom from "./getComponentRootDom";
import Icon from "@/components/Icon";
import styles from "./showMessage.module.less";

/**
 * 弹出消息
 * @param {String} content 消息内容
 * @param {String} type 消息类型  info  error  success  warn
 * @param {Number} duration 多久后消失
 * @param {HTMLElement} container 容器，消息会显示到该容器的正中；如果不传，则显示到页面正中
 */
export default function(opctions = {}) {
    const content = opctions.content || "";
    const type = opctions.type || "info";
    const duration = opctions.duration || 2000;
    const container = opctions.container || document.body;
    // 创建消息元素
    const div = document.createElement('div');
    // 获取IconDom元素
    const iconDom = getComponentRootDom(Icon, {
        type
    })
    div.innerHTML = `<span class="${styles.icon}">${iconDom.outerHTML}</span><div>${content}</div>`;
    // 设置样式
    div.className = `${styles.message} ${styles['message-'+type]}`;
    // 将div加入到容器中
    // 容器的position是否改动过
    if (opctions.container) {
        if (getComputedStyle(container).position === 'static') {
            container.style.position = 'relative'
        }
    }
    container.appendChild(div);
    // 浏览器强行渲染
    div.clientHeight; // 获取值会强行渲染
    // 回归到正常位置
    div.style.opacity = 1;
    div.style.transform = `translate(-50%, -50%)`;
    // 等一段时间，消失
    setTimeout(() => {
        div.style.opacity = 0;
        div.style.transform = `translate(-50%, -50%) translateY(-25px)`;
        // 等待过渡完成，删除弹窗
        div.addEventListener('transitionend', function() {
            this.remove();
            // 判断是否有回调函数，如果有的话就运行
            opctions.callback && opctions.callback();
        }, { once: true })
    }, duration);

}